<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.min.css">
    <style>
        .pre-load{text-align:center; position:absolute; width:100%;}
        .pre-btn{ z-index:10;}
        #pcSlide{width:100%;height:605px;float:left;position:relative;}
        #pcSlide .img{width:100%;height:605px;position:absolute;text-align:center;cursor:pointer;}
        #pcSlide .btn{margin-top:230px;}

        #pcpage{width:100%;height:600px;float:left;position:relative;}
        #pcpage .img{width:100%;height:600px;position:absolute;text-align:center;cursor:pointer;}
        #pcpage .btn{margin-top:230px;}

        #pcbanner{width:100%;height:550px;float:left;position:relative;}
        #pcbanner .img{width:100%;height:550px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner .btn{margin-top:200px;}
        #pcbanner .pre-load{
            background:url(/templets/default/images/pcbanner.jpg) no-repeat #f7f3f2 center 50%; height:550px;}


        #pcbanner2{width:100%;height:523px;float:left;position:relative;}
        #pcbanner2 .img{width:100%;height:523px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner2 .btn{margin-top:220px;}
        #pcbanner2 .pre-load{
            background:url(/templets/default/images/pcbanner2.jpg) no-repeat #fff center 50%; height:523px;}

        #pcbanner3{width:100%;height:460px;float:left;position:relative;}
        #pcbanner3 .img{width:100%;height:460px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner3 .btn{margin-top:190px;}
        #pcbanner3 .pre-load{
            background:url(/templets/default/images/pcbanner3.jpg) no-repeat #fff center 50%; height:460px;}


        #pcbanner4{width:100%;height:275px;float:left;position:relative;}
        #pcbanner4 .img{width:100%;height:275px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner4 .btn{margin-top:100px;}


        #pcbanner5{width:100%;height:657px;float:left;position:relative;}
        #pcbanner5 .img{width:100%;height:657px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner5 .btn{margin-top:295px;}



        #xinhua{width:100%;height:441px;float:left;position:relative;}
        #xinhua .img{width:100%;height:441px;position:absolute;text-align:center;cursor:pointer;}
        #xinhua .btn{margin-top:180px;}

        #bigcms{width:100%;height:500px;float:left;background:#03c36b;position:relative;}
        #bigcms .img{width:100%;height:500px;position:absolute;text-align:center;cursor:pointer;}
        #bigcms .btn{margin-top:222px;}

        #history{width:100%;height:144px;float:left;background:#fff;position:relative;}
        #history .img{width:100%;height:144px;position:absolute;text-align:center;cursor:pointer;}
        #history .btn{margin-top:45px;}

        #apple{width:100%;height:720px;float:left;background:#000;position:relative;}
        #apple .img{width:100%;height:720px;position:absolute;text-align:center;cursor:pointer;}
        #apple .btn{margin-top:330px;}


        #pcweb{
            width:1230px;
            margin:0 auto;}
        #pcweb	 a{
            padding:10px;
            background:#fff;
            border:1px solid #eee;}
        @-webkit-keyframes fadeInDown {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,-100%,0);
                transform: translate3d(0,-100%,0)
            }

            100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }

        @keyframes fadeInDown {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,-100%,0);
                -ms-transform: translate3d(0,-100%,0);
                transform: translate3d(0,-100%,0)
            }

            100% {
                opacity: 1;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none
            }
        }
        @-webkit-keyframes fadeInUp {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0)
            }
            100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                -ms-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0)
            }
            100% {
                opacity: 1;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none
            }
        }

        *{
            padding:0;
            margin:0;
        }
        html,body,.swiper-container,.swiper-wrapper,.swiper-slide{
            width:100%;
            height:100%;
        }
        html{
            font: 12px/1.5 "Microsoft YaHei","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
        }
        img{
            vertical-align: middle;
        }
        a{
            text-decoration:none;
        }
        .swiper-slide{background-position:50% 50%; position:relative;}
        .slide1{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/1.jpg);}
        .slide2{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/2.jpg);}
        .slide3{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/3.jpg);}
        .slide4{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/4.jpg);}
        .slide5{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/5.jpg);}
        .slide6{background-image:url(http://3.swiper.com.cn/demo/pcpage/img/6.jpg);}
        .pagination{
            position: fixed;
            z-index: 100;
            margin-top: -81.5px;
            top: 50%;
            right:17px;
        }
        .swiper-pagination-switch{
            width:11px;
            height:11px;
            border:1px solid #ddd;
            border-radius:50%;
            display:block;
            margin:7px 7px 13px;
            cursor:pointer;
        }
        .swiper-active-switch{
            background:#ddd;
        }
        .logo{
            position: absolute;
            left: 60px;
            top: 60px;
        }
        .fs16{font-size:16px;}
        .fs24{font-size:24px;}
        .pt5{padding-top:5px;}
        .pt10{padding-top:10px;}
        .mt30{margin-top:30px;}
        .mb20 {margin-bottom: 20px;}
        .mt20 {margin-top: 20px;}
        .mt15{margin-top:15px;}
        .mt40{margin-top:40px;}
        .mr35{margin-right:35px;}
        .ml10 {margin-left: 10px;}
        .line {width: 40px;height: 1px;background: #fff;}
        .dividing-line {display: inline-block;vertical-align: middle;border-left: 1px solid #fff;height: 15px;margin: 0 8px;}
        .white{color:#fff;}
        .btn{
            display: inline-block;
            vertical-align: middle;
            width: 240px;
            height: 60px;
            line-height: 60px;
            background: #f8ac00;
            border-radius: 2px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            transition: all 1s;
            -webkit-transition: all 1s;
        }
        .btn:hover{
            background: #ffc555;
        }
        .slide1 p{
            color: #666;
        }
        .ani{
            opacity:0;
        }
        .ani-slide .ani1-1{
            opacity:1;
            -webkit-animation: fadeInDown 0.5s both;
            animation: fadeInDown 0.5s both;
        }
        .ani-slide .ani1-2{
            opacity:1;
            -webkit-animation: fadeInDown 1s 0.5s both;
            animation: fadeInDown 1s 0.5s both;
        }
        .ani-slide .ani1-3{
            opacity:1;
            -webkit-animation: fadeInDown 1s 1s both;
            animation: fadeInDown 1s 1s both;
        }
        .ani-slide .ani2-1,.ani-slide .ani3-1,.ani-slide .ani4-1,.ani-slide .ani5-1{
            opacity: 1;
            -webkit-animation: fadeInUp 1s both;
            animation: fadeInUp 1s both;
        }
        .ani-slide .ani2-2,.ani-slide .ani3-2,.ani-slide .ani4-2,.ani-slide .ani5-2{
            opacity: 1;
            -webkit-animation: fadeInUp 1s 0.5s both;
            animation: fadeInUp 1s 0.5s both;
        }
        .ani-slide .ani5-1-2{
            opacity: 1;
            -webkit-animation: fadeInUp 1s 0.3s both;
            animation: fadeInUp 1s 0.3s both;
        }
        .ani-slide .ani6-1 {
            opacity: 1;
            -webkit-animation: fadeInDown 0.5s both;
            animation: fadeInDown 0.5s both;
        }
        .ani-slide .ani6-2 {
            opacity: 1;
            -webkit-animation: fadeInDown 1s 0.5s both;
            animation: fadeInDown 1s 0.5s both;
        }
        .ani-slide .ani6-3 {
            opacity: 1;
            -webkit-animation: fadeInDown 1s 1s both;
            animation: fadeInDown 1s 1s both;
        }
    </style>
</head>
<body>

<div class="full" style="padding-bottom:30px; background:#fff;"><div style="width:1200px; margin:0 auto;">
    <p class="demo-title">
        Swiper在PC端的全屏页面效果展示[<a href="/demo/pcpage/" target="_blank">全屏展示</a>]</p>
    <div id="pcpage">
        <div class="img pre-btn">
            <img src="http://3.swiper.com.cn/templets/default/images/play.png" class="btn"></div>
        <div class="pre-load"><img src="http://3.swiper.com.cn/templets/default/images/pcpage.png"></div>
        <iframe height="600" data-src="http://3.swiper.com.cn/demo/pcpage/" width="100%">
            <div class="swiper-container" style="cursor: -webkit-grab;">
                <div class="swiper-wrapper" style="width: 1200px; height: 4800px; transform: translate3d(0px, -600px, 0px); transition-duration: 0.4s;"><div class="swiper-slide slide6 swiper-slide-duplicate" style="width: 1200px; height: 600px;">
                    <div style=" position:absolute; top:50%; width:100%;text-align:center;margin-top: -200px; z-index:10;">
                        <div class="ani ani6-1"><img width="259" height="29" src="http://3.swiper.com.cn/demo/pcpage/img/6-1-title.png" alt="客户服务记录公开"></div>
                        <div class="ani ani6-2 mt40"><img width="552" height="74" src="http://3.swiper.com.cn/demo/pcpage/img/6-2-title.png" alt="把主动权交回我"></div>
                        <div class="mt40 pt15 ani ani6-3"><a class="btn" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1930&amp;extra=" target="_blank">下载这个实例</a></div>
                    </div>
                </div>
                    <div class="swiper-slide slide1 swiper-slide-visible swiper-slide-active ani-slide" style="width: 1200px; height: 600px;">
                        <a href="#" class="logo"><img src="http://3.swiper.com.cn/demo/pcpage/img/logo.png"></a>
                        <div style="position: absolute;left: 24%;top:28%; z-index:10;">
                            <div style="margin-top: -13px;" class="ani ani1-1"><img src="http://3.swiper.com.cn/demo/pcpage/img/1-title.png"></div>
                            <div class="ani ani1-2">
                                <p class="fs24 pt5">客服和我说了什么?</p>
                                <p class="fs24 pt10">每一次的沟通在这里都可以找到</p>
                            </div>
                            <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1930&amp;extra=" target="_blank" class="btn mt30 ani ani1-3">下载这个实例</a>
                        </div>
                    </div>
                    <div class="swiper-slide slide2" style="width: 1200px; height: 600px;">
                        <div style="position: absolute;left: 13.5%;top:26.5%; z-index:10;">
                            <div class="ani ani2-1"><img src="http://3.swiper.com.cn/demo/pcpage/img/2-title.png"></div>
                            <div class="fs16 white mt20 ml10 ani ani2-2">
                                <p>第一次买保险，特担心被忽悠买错产品，这下可以放心啦！</p>
                                <p class="mt20 mb20 line"></p>
                                <p>销售行为可回溯<span class="dividing-line"></span>沟通永久可查</p>
                            </div>
                        </div>


                    </div>
                    <div class="swiper-slide slide3" style="width: 1200px; height: 600px;">
                        <div style="position: absolute;left: 28%;top:25%;z-index:10;">
                            <div class="ani ani3-1"><img src="http://3.swiper.com.cn/demo/pcpage/img/3-title.png"></div>
                            <div class="fs16 white mt20 ml10 ani ani3-2">
                                <p>两年前，给老公买了份保险，产品条款当时客服怎么解释来着？</p>
                                <p class="line mt20 mb20"></p>
                                <p>电话语音记录<span class="dividing-line"></span>在线交互记录<span class="dividing-line"></span>随时随地查询、导出、转存</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide slide4" style="width: 1200px; height: 600px;">
                        <div style="position: absolute;right: 16%;top:22%; z-index:10; text-align:right;">
                            <div class="ani ani4-1"><img width="517" height="112" src="http://3.swiper.com.cn/demo/pcpage/img/4-title.png"></div>
                            <div class="fs16 white mt15 mr35 ani ani4-2" style="margin-right:35px;">
                                <p>保险是件复杂的事，很多问题都需要耐心解答，有记录，有依据，服务好不好，自己说了算！</p>
                                <p class="line mt20 mb20" style="display: inline-block;vertical-align: middle;"></p>
                                <p>服务过程监督<span class="dividing-line"></span>投保体验评价有依据</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide slide5" style="width: 1200px; height: 600px;">
                        <div style="position: absolute;left: 13%;top:19%; z-index:10;">
                            <div class="ani ani5-1"><img width="194" height="62" src="http://3.swiper.com.cn/demo/pcpage/img/5-1-title.png"></div>
                            <div class="pt10 ani ani5-1-2"><img width="592" height="70" src="http://3.swiper.com.cn/demo/pcpage/img/5-2-title.png"></div>
                            <div class="fs16 white ml10 ani ani5-2">
                                <p class="mt20">2007年7月，第一次在互联网上买了份旅游险；</p>
                                <p class="mt20">2008年1月，反复咨询沟通后给老公买了重疾险；</p>
                                <p class="mt20">2009年3月，终于把自己的重疾保障也规划好了；</p>
                                <p class="pt10">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide slide6" style="width: 1200px; height: 600px;">
                        <div style=" position:absolute; top:50%; width:100%;text-align:center;margin-top: -200px; z-index:10;">
                            <div class="ani ani6-1"><img width="259" height="29" src="http://3.swiper.com.cn/demo/pcpage/img/6-1-title.png" alt="客户服务记录公开"></div>
                            <div class="ani ani6-2 mt40"><img width="552" height="74" src="http://3.swiper.com.cn/demo/pcpage/img/6-2-title.png" alt="把主动权交回我"></div>
                            <div class="mt40 pt15 ani ani6-3"><a class="btn" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1930&amp;extra=" target="_blank">下载这个实例</a></div>
                        </div>
                    </div>
                    <div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1200px; height: 600px;">
                        <a href="#" class="logo"><img src="http://3.swiper.com.cn/demo/pcpage/img/logo.png"></a>
                        <div style="position: absolute;left: 24%;top:28%; z-index:10;">
                            <div style="margin-top: -13px;" class="ani ani1-1"><img src="http://3.swiper.com.cn/demo/pcpage/img/1-title.png"></div>
                            <div class="ani ani1-2">
                                <p class="fs24 pt5">客服和我说了什么?</p>
                                <p class="fs24 pt10">每一次的沟通在这里都可以找到</p>
                            </div>
                            <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1930&amp;extra=" target="_blank" class="btn mt30 ani ani1-3">下载这个实例</a>
                        </div>
                    </div></div>
            </div>

        </iframe>
    </div>

</div></div>

<script src="../jquery-1.9.1/jquery.min.js"></script>

<script src="https://adservice.google.com/adsid/integrator.js?domain=3.swiper.com.cn"></script>

<script>
    // JavaScript Document
    window.onload = function(){
        var mySwiper = new Swiper('.swiper-container',{
            speed:400,
            mode : 'vertical',
            resistance:'100%',
            loop:true,
            mousewheelControl : true,
            grabCursor: true,
            pagination: '.pagination',
            paginationClickable: true,
            onFirstInit:function(){
                $('.slide1').addClass('ani-slide');
            }
        })

        mySwiper.wrapperTransitionEnd(function () {//隐藏方法
            $('.ani-slide').removeClass('ani-slide')
            $('.swiper-slide').eq(mySwiper.activeIndex).addClass('ani-slide')
        },true);
    }
</script>
</body>
</html>